<template>
	<view class="nft_detail">
		<fireworks v-if="isReady" />
		<!-- 合成九宫格 -->
		<view class="debris_show_area suipian" v-if="!isSynthetic">
			<view class="item" :class="[animate ?'animate'+(index+1):'', 'item'+(index+1)]" v-for="(item,index) in areaList" :key="item.name">
				<image :src="item.imgUrl" mode=""></image>
			</view>
		</view>
		<view class="debris_show_area chengpin" v-else>
			<image src="http://ipfs.flyray.me/ipfs/QmXvvGqqVtEVFWZbWRhoNNrKhtK7za7Zt71gJMtuxWece9" mode="" style="width: 100%; height: 100%;"></image>
		</view>
		<!-- 切换区 -->
		<view class="tab_change">
			<u-tabs :list="tabChangeList" @click="tabChange" :inactiveStyle="{color: '#999'}"
				:activeStyle="{color: 'var(--echo-main-color)'}" lineColor="var(--echo-main-color)">></u-tabs>
			<!-- 已拥有 -->
			<view class="alreadyHave" v-if="tabIndex === 0">
				<debris-list :ishave="true" @transfer="transfer" @sell="sell"></debris-list>
			</view>
			<!-- 未拥有 -->
			<view class="noHave" v-else>
				<debris-list :ishave="false" @buy="buy"></debris-list>
			</view>
		</view>
		<!-- 合成按钮 -->
		<view class="synthetic_btn">
			<u-button :text="isSyntheticText" color="var(--echo-main-color)" @tap="toSynthetic" :disabled="isdisabled"></u-button>
		</view>
		<!-- 转让弹出层 -->
		<u-popup :show="transferShow" @close="closeTransferShow" @open="openTransferShow" mode="center" :round="10">
			<view class="transfer">
				<u--input placeholder="请输入账户" border="surround" suffixIcon="account-fill"
					suffixIconStyle="color: #909399;font-size: 24px">
					<u--text text="目标账户" slot="prefix" margin="0 3px 0 0" type="tips"></u--text>
				</u--input>
				<view class="transfer_tips">资金将实时到账,请确定好再转账</view>
				<view class="transfer_btn">
					<u-button text="转让" color="var(--echo-main-color)" @tap="confirmTransfer"></u-button>
				</view>
			</view>
		</u-popup>
		<!-- 出售弹出框 -->
		<view class="sell">
			<u-modal :show="sellShow" :showCancelButton="true" @cancel="closeSell" :closeOnClickOverlay="true"
				@close="closeSell" @confirm="confirmSell">
				<view class="">是否出售此碎片</view>
			</u-modal>
		</view>
	</view>
</template>
<script>
	import fireworks from '@/components/fireworks/fireworks.vue'
	export default {
		data() {
			return {
				// tab切换
				tabChangeList: [{
					name: '已拥有',
				}, {
					name: '未拥有',
				}],
				// 动态class
				animate: false,
				// 烟花效果
				isReady: false,
				tabIndex: 0,
				// 九宫格数据
				// areaList: [1, 2, 3, 4, 5, 6, 7, 8, 9],
				// 控制转让框
				transferShow: false,
				// 出售
				sellShow: false,
				// 是否合成
				isSynthetic : false,
				// 是否可以点击
				isdisabled : false,
				isSyntheticText : '开始合成',
				areaList: [{
						name: 1,
						imgUrl: '../../static/img/nft/debris_one.png'
					},
					{
						name: 2,
						imgUrl: '../../static/img/nft/debris_two.png'
					},
					{
						name: 3,
						imgUrl: '../../static/img/nft/debris_three.png'
					},
					{
						name: 4,
						imgUrl: '../../static/img/nft/debris_four.png'
					},
					{
						name: 5,
						imgUrl: '../../static/img/nft/debris_five.png'
					},
					{
						name: 6,
						imgUrl: '../../static/img/nft/debris_six.png'
					},
					{
						name: 7,
						imgUrl: '../../static/img/nft/debris_seven.png'
					},
					{
						name: 8,
						imgUrl: '../../static/img/nft/debris_eight.png'
					},
					{
						name: 9,
						imgUrl: '../../static/img/nft/debris_nine.png'
					},

				]
			}
		},
		// onReady() {
		// 	this.isReady = true;
		// },
		methods: {
			tabChange(item) {
				this.tabIndex = item.index
			},
			// 转让
			transfer() {
				this.transferShow = true
			},
			// 弹出框关闭
			closeTransferShow() {
				this.transferShow = false
			},
			// 确认转让
			confirmTransfer() {
				this.transferShow = false
			},
			// 出售
			sell() {
				this.sellShow = true
			},
			// 取消出售
			closeSell() {
				this.sellShow = false
			},
			// 确认出售
			confirmSell() {
				this.sellShow = false
			},
			// 购买
			buy() {
				uni.switchTab({
					url: '/pages/nft/nft'
				});
			},
			// 合成
			toSynthetic() {
				this.animate = true
				setTimeout(() => {
					this.isReady = true
					this.isSynthetic = true
					this.isdisabled = true
					this.isSyntheticText = '合成完毕'
				}, 1100)
				setTimeout(() => {
					this.isReady = false
				}, 2000)
			}
		}
	}
</script>
<style lang="scss">
	.debris_show_area {
		padding: 60rpx 60rpx 100rpx;
		box-sizing: border-box;
		height: 800rpx;
		margin-bottom: 100rpx;
		background-color: #F1F1F1;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;
		// align-items: center;
		// align-content: space-around;

		.item {

			// display: flex;
			// align-items: center;
			// justify-content: center;
			// box-sizing: content-box;
			position: relative;
			image {
				width: 100%;
				height: 100%;
			}
		}

		.item1 {
			// background-color: red;
			width: 35%;
			height: 30%;
		}

		.item2 {
			// background-color: yellow;
			width: 30%;
			height: 35%;
		}

		.item3 {
			// background-color: pink;
			height: 30%;
			width: 35%;
			position: relative;

		}

		.item4 {
			// background-color: green;
			height: 38%;
			width: 29%;
		}

		.item5 {
			// background-color: #fff;
			width: 42%;
			height: 30%;
			align-self: center;
		}

		.item6 {
			// background-color: #fcf;
			height: 38%;
			width: 29%;
		}

		.item7 {
			// background-color: #ccc;
			height: 30%;
			width: 35%;
			align-self: flex-end;
		}

		.item8 {
			// background-color: purple;
			height: 35%;
			width: 30%;
		}

		.item9 {
			// background-color: skyblue;
			width: 35%;
			height: 30%;
			align-self: flex-end;
		}
	}

	// 动画效果
	@keyframes animate1 {
		from {
			top: 0;
			left: 0;
		}

		to {
			top: 70rpx;
			left: 60rpx;
		}
	}

	.animate1 {
		animation: animate1 1s linear forwards
	}

	@keyframes animate2 {
		from {
			top: 0;
		}

		to {
			top: 68rpx;;
		}
	}

	.animate2 {
		animation: animate2 1s linear forwards
	}

	@keyframes animate3 {
		from {
			top: 0;
			left: 0;
		}

		to {
			top: 68rpx;
			left: -60rpx;
		}
	}

	.animate3 {
		animation: animate3 1s linear forwards
	}


	@keyframes animate4 {
		from {
			left: 0;
		}

		to {
			left: 60rpx;
		}
	}

	.animate4 {
		animation: animate4 1s linear forwards
	}

	@keyframes animate6 {
		from {
			left: 0;
		}

		to {
			left: -56rpx;
		}
	}

	.animate6 {
		animation: animate6 1s linear forwards
	}

	@keyframes animate7 {
		from {
			top: 0;
			left: 0;
		}

		to {
			top: -72rpx;
			left: 60rpx;
		}
	}

	.animate7 {
		animation: animate7 1s linear forwards
	}

	@keyframes animate8 {
		from {
			top: 0;
		}

		to {
			top: -68rpx;
		}
	}

	.animate8 {
		animation: animate8 1s linear forwards
	}

	@keyframes animate9 {
		from {
			top: 0;
			left: 0;
		}

		to {
			top: -68rpx;
			left: -60rpx;
		}
	}

	.animate9 {
		animation: animate9 1s linear forwards
	}

	.tab_change {
		position: relative;
		z-index: 2;
		top: -100rpx;
		border-top-left-radius: 50rpx;
		border-top-right-radius: 50rpx;
		background-color: #fff;
		height: 600rpx;
		overflow: hidden;
	}

	// 合成按钮
	.synthetic_btn {
		position: fixed;
		z-index: 3;
		bottom: 60rpx;
		left: 50%;
		margin-left: -40%;
		width: 80%;
	}

	// 转让弹出
	.transfer {
		width: 700rpx;
		background-color: #fff;
		border-radius: 10rpx;
		overflow: hidden;
		padding: 40rpx;
		box-sizing: border-box;

		&_tips {
			color: #999;
			font-size: 26rpx;
			padding: 30rpx 0;
		}

		&_btn {
			width: 200rpx;
			margin: 0 auto;
		}
	}
</style>
